<!DOCTYPE html>
<html lang="en">

<head>
<!-- <%-- Echarts数据展示页面 --%> -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="images/icon.ico" type="/image/x-icon" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <title>Account - Orders Management Display System</title>
</head>
<body>
<main>
    <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" style="width: 20%;min-width: 150px">
        <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
            <span class="fs-4">Orders Management Display System</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="overview.html" class="nav-link link-dark" aria-current="page">
                    Overview
                </a>
            </li>
            <li>
                <a href="account.html" class="nav-link dark">
                    Accounts
                </a>
            </li>
            <li>
                <a href="manage.html" class="nav-link link-dark">
                    All Orders
                </a>
            </li>
            <li>
                <a href="query.html" class="nav-link link-dark">
                    Orders Query
                </a>
            </li>
            <li>
                <a href="echarts.html" class="nav-link active">
                  Chart Display
                </a>
              </li>
            <li>
                <a href="file.html" class="nav-link link-dark">
                    File
                </a>
            </li>
        </ul>
        <hr>

        <div class="dropdown">
            <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
                <strong id="user_name_text"></strong>
            </a>
            <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
                <li><a class="dropdown-item" href="setting.html">Settings</a></li>
                <li><hr class="dropdown-divider"></li>
                <li class="dropdown-item" id="logout">
                    Logout
                </li>
            </ul>
            <script type="text/javascript">
                const logoutButton = document.getElementById('logout')
                logoutButton.addEventListener("click", function () {
                    const request = new XMLHttpRequest()
                    request.onreadystatechange = function () {
                        if (request.readyState === 4 && request.status === 200) {
                            const json = JSON.parse(request.responseText)
                            if (json.errorCode !== "00000") {
                                alert(json.message)
                            }
                            window.location.href = "/"
                        } else if (request.readyState === 4 && request.status !== 200) {
                            alert(request.status)
                        }
                    }

                    request.open("POST", "/api/user/logout", true)
                    request.send()
                })

                window.onload = function () {
                    sendCurrent()
                }

                function sendCurrent() {
                    const request = new XMLHttpRequest()
                    const usernameText = document.getElementById('user_name_text')
                    request.onreadystatechange = function () {
                        if (request.readyState === 4 && request.status === 200) {
                            const json = JSON.parse(request.responseText)
                            if (json.errorCode !== undefined) {
                                alert(json.message)
                                window.location.href = "/"
                                return
                            }
                            usernameText.innerHTML = json.username
                        } else if (request.readyState === 4 && request.status !== 200) {
                            alert(request.status)
                        }
                    }

                    request.open("POST", "/api/user/current", true)
                    request.send()
                }
            </script>
        </div>
    </div>
    <div class="d-flex flex-column p-3">
        <h1>All Orders</h1>
        <hr class="dropdown-divider">
        <div id="main" style="width: 600px;height:400px;"></div>
    </div>
</main>

<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let names = [];
    let myData = [];
    let option = {
        title : {
            text : '订单详情'
        },
        legend : {
            top: '5%',
            left: 'center',
            data : []

        },
        tooltip:{
            trigger: 'item',
            show: true
        },
        series : [
            {
                name: '订单',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,

                itemStyle: {        //上方显示数值
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data:[],
            }
        ]};

    $.ajax({
        type : "post",
        async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "/api/order/get",
        dataType : "json",
        success : function(data) {
            if (data.errorCode === undefined) {
                //接收到的数据
                const obj = data;
                let mapping = new Map()
                for (let i in obj){
                    let name = obj[i].name
                    names.push(obj[i].name);
                    let amount = mapping.get(name)
                    if (amount !== undefined) {
                        mapping.set(name, obj[i].amount + amount)
                    } else {
                        mapping.set(name, obj[i].amount)
                    }
                }
                let i = 0;
                mapping.forEach(function (value, key, map) {
                    myData[i] = {
                        value: value,
                        name: key
                    };
                    i++;
                })

                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({ //加载数据图表
                    legend: {
                        data: names
                    },
                    series : [{
                        // 根据名字对应到相应的系列
                        name : ['总计'],
                        data : myData
                    }]

                });
            }
            else{
                alert("失败");
            }
        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });

    myChart.setOption(option);

</script>


</body>
</html>
